<template>
  <!-- 内容区域 -->
  <div class="container">
    <!-- 轮播 -->
    <div class="banner">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        height="140"
        indicator-color="white"
      >
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <img v-lazy="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <div
        class="item"
        v-for="item in iconArr"
        :key="item.id"
        @click="goBookLists(item.text, item.keyword)"
      >
        <span class="icon" :style="'background:' + item.bgcolor + ';'">
          <i :class="['iconfont', item.icon]"></i>
        </span>
        <span class="text">{{ item.text }}</span>
      </div>
    </div>
    <!-- 各种分类 -->
    <div class="details">
      <!-- 每一个模块 -->
      <div class="items" v-for="(item, index) in choicenessLists" :key="index">
        <!-- 顶部 -->
        <div class="top">
          <span class="name"
            ><i class="iconfont icon-shuben"></i> {{ item.title }}</span
          >
          <span class="more" @click="goBookLists(item.title, item.key)">
            更多 <i class="iconfont icon-youjiantou"></i>
          </span>
        </div>
        <!-- 内容 -->
        <div class="content">
          <router-link
            tag="div"
            class="book_item"
            v-for="key in item.books"
            :to="'/bookdetails?id=' + key.id"
            :key="key.id"
          >
            <div class="book">
              <!-- 图片 -->
              <div class="img">
                <img v-lazy="key.cover" alt="图片加载失败了" />
              </div>
              <!-- 文字 -->
              <p class="book_name">{{ key.title }}</p>
              <p class="writer">{{ key.author }}</p>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // 轮播图
      banner: [
        "https://static.zongheng.com/upload/recommend/11/36/11369b3cf2afd11038ca2876618ef902.jpeg",
        "https://static.zongheng.com/upload/recommend/0a/5a/0a5a16695bc24304646f56f5a1bf1d0d.jpeg",
        "https://static.zongheng.com/upload/recommend/a2/a8/a2a8a49dec8fbc60e95c7f768f496382.jpeg",
        "https://static.zongheng.com/upload/recommend/10/db/10db5cd3666bb50fc6b7658c3cc21a1b.jpeg",
      ],
      // 图标
      iconArr: [
        {
          id: 1,
          icon: "icon-tuijian",
          text: "推荐",
          bgcolor: "#f09e9d",
          keyword: "剑",
        },
        {
          id: 2,
          icon: "icon-shoucang",
          text: "收藏",
          bgcolor: "#b2a1c7",
          keyword: "仙",
        },
        {
          id: 3,
          icon: "icon-icon_pingfen",
          text: "评分",
          bgcolor: "#eec671",
          keyword: "开",
        },
        {
          id: 4,
          icon: "icon-liebiaoqiehuaniconxuanzhong",
          text: "完结",
          bgcolor: "#8eccfa",
          keyword: "完",
        },
        {
          id: 5,
          icon: "icon-remen",
          text: "热更",
          bgcolor: "#9ce3af",
          keyword: "神",
        },
      ],
      // 界面精选内容数据
      choicenessLists: [],
    };
  },
  methods: {
    // 获取界面精选数据
    getChoicenessListsFun() {
      axios.get("data/bookmall/ranking.json").then((res) => {
        this.choicenessLists = res.data;
      });
    },
    // 前往列表
    goBookLists(title, key) {
      this.$router.push({ name: "booklists", query: { title, key } });
    },
  },
  created() {
    // 渲染界面
    this.getChoicenessListsFun();
  },
};
</script>

<style lang="less">
// 内容区域
.container {
  // 轮播图
  .banner {
    margin-top: 4px;
    .my-swipe .van-swipe-item {
      width: 100%;
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  //   导航
  .nav {
    display: flex;
    align-items: center;
    height: 74px;
    border-bottom: 4px solid #f7f7f7;
    .item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .icon {
        width: 36px;
        height: 36px;
        border-radius: 100%;
        text-align: center;
        line-height: 36px;
        i {
          color: #ffffff;
        }
      }
      .text {
        margin-top: 4px;
        font-size: 12px;
        color: #858585;
      }
    }
  }
  // 书本详情
  .details {
    height: auto;
    .items {
      border-bottom: 4px solid #f7f7f7;
      &:last-child {
        border: none;
      }
      // 顶部
      .top {
        height: 34px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        .name {
          font-size: 16px;
          font-weight: bold;
          color: #181818;
        }
        .more {
          font-size: 14px;
          color: #8e8e8e;
          i {
            font-size: 14px;
          }
        }
      }
      // 内容
      .content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .book_item {
          flex: 0 0 33.333333%;
          margin: 15px 0;
          display: flex;
          justify-content: center;
          height: 170px;
          .book {
            width: 90px;
            display: flex;
            flex-direction: column;
            // 书籍图片
            .img {
              width: 90px;
              height: 120px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            p {
              // 控制不换换行超出点点点
              flex: 0 0 25px;
              line-height: 25px;
              padding-right: 4px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .book_name {
              font-size: 14px;
              color: #3f3f3f;
            }
            .writer {
              font-size: 12px;
              color: #a4a4a4;
            }
          }
        }
      }
    }
  }
}
</style>